<template>
<!-- 首页轮播组件 -->
  <div class="home-rotation">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.imgUrl" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe , SwipeItem , Lazyload} from 'vant'
Vue.use(Swipe).use(SwipeItem).use(Lazyload)
// 获取轮播图的数据
import {sliders} from '../../../api/index.js'
export default {
  data() {
    return {
      images: [],
    };
  },
  mounted(){
    // 通过回调把数据传入 数组images 中
    sliders((res)=>{
      this.images = res.data.data
    })
  }
};
</script>

<style scoped>
.home-rotation {
  width: 100%;
}
.van-swipe .van-swipe-item{
  width: 100%;
  height: 375px;
}
.van-swipe .van-swipe-item img {
  display: block;
  width: 100%;
  height: 100%;
}
</style>